
<template>
  <div>
      <!-- 轮播图区域 -->
      <mt-swipe :auto="4000">
          <!-- 在组件中使用 v-for 循环使用 key -->
        <mt-swipe-item v-for="item in lunbotulist" :key="item.img_src">
            <img :src="item.img_src" alt="">
        </mt-swipe-item>
        <!-- <mt-swipe-item>2</mt-swipe-item>
        <mt-swipe-item>3</mt-swipe-item> -->
      </mt-swipe>

      <!-- mui 的 九宫格 -->
       <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/home/experience">
                    <span class="mui-icon mui-icon-chatbubble"></span>
                    <div class="mui-media-body">工作经历</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/home/intention">
                    <span class="mui-icon mui-icon-gear"></span>
                    <div class="mui-media-body">求职意向</div>
                </router-link>
            </li>

            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/home/evaluation" >
                    <span class="mui-icon mui-icon-info"></span>
                    <div class="mui-media-body">自我评价</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/home/look" >
                    <span class="mui-icon mui-icon-phone"></span>
                    <div class="mui-media-body">观看反馈</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/home/other" >
                    <span class="mui-icon mui-icon-search"></span>
                    <div class="mui-media-body">其他链接</div>
                </router-link>
            </li>
         
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/home/more">
                    <span class="mui-icon mui-icon-more"></span>
                    <div class="mui-media-body">更多功能</div>
                </router-link>
            </li>
        </ul> 



  </div>
</template>

<script>
// 加载弹框
import {Toast} from 'mint-ui'
export default {
  data(){
      return {
        lunbotulist:[]
      }
  },
  created(){
      this.getlunbotu()
  },
  methods:{
    // 获取轮播图数据的方法
    getlunbotu(){
        this.$http.get("lunbotu/lunbotu.json").then(result=>{
            // 成功
            if(result.body.status===0){
               this.lunbotulist = result.body.message
               Toast("获取技能成功。。。")
            }else{
                // 失败了
                Toast("获取失败。。。")
            }
            //    console.log(result.body)
        })
     
    }
  }
}
</script>


<style lang="scss" scoped>
// 轮播图没有高度
.mint-swipe{
    height: 200px;
    .mint-swipe-item{
        background:red;

        img{
            width: 100%;
            height: 100%;
        }
    }
}
// 去掉九宫格的 边框
.mui-grid-view.mui-grid-9{
    border: none;
    background-color: #fff;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell{
    border: none;
}

</style>


